<template>
  <el-card
    :body-style="{
      padding: '0 0 0 0',
      backgroundColor: '#fff',
      position: 'relative',
    }"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="最热" name="hotSyGames"></el-tab-pane>
      <el-tab-pane label="最新" name="newSyGames"></el-tab-pane>
    </el-tabs>
    <div class="list" v-if="activeName === 'hotSyGames'">
      <div class="item" v-for="item in data.hotSyGames" :key="item.id" @click="gotoDetail(item, router)">
        <img :src="item.icon" alt="" />
        <div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="list" v-if="activeName === 'newSyGames'">
      <div class="item" v-for="item in data.newSyGames" :key="item.id" @click="gotoDetail(item, router)">
        <img :src="item.icon" alt="" />
        <div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed, defineProps ,onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = ref(useRoute());
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        newSyGames: [],
        hotSyGames: [],
      };
    },
  },
});

const activeName = ref("hotSyGames");
onMounted(()=>{
  nextTick(()=>{
    let arr = document.getElementsByClassName('el-tabs__item');
    for(let i=0;i<arr.length;i++){
      arr[i].addEventListener("mouseover", () => {
        activeName.value=["hotSyGames","newSyGames"][i];
      });
    }
  })
})
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.list {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 119.5px;
    height: 136px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    &:hover {
      span {
        color: @theme-color;
      }
      img {
        opacity: 0.6;
      }
    }
    // &:not(:nth-child(5n)) {
    //   margin-right: 30px;
    // }
    img {
      width: 72px;
      height: 72px;
      margin: auto;
      border-radius: 8px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2127;
      line-height: 16px;
    }
  }
}
.el-tabs {
  ::v-deep(.el-tabs__nav-wrap) {
    padding-left: 20px;
  }

  ::v-deep(.el-tabs__item) {
    height: 32px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #93999e;
    line-height: 1;
  }

  ::v-deep(.is-active) {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #47b752;
    line-height: 1;
  }

  ::v-deep(.el-tabs__active-bar) {
    background-color: #47b752;
  }

  ::v-deep(.el-tabs__nav-scroll) {
    padding: 16px 20px 0 20px;
  }
}
</style>